<template>
	<view class="girls">
		<view class="header">
			<view class="flex center">
				<uni-icons type="eye" size="30" color="#fff"></uni-icons>
				<text class="h2">淘宝卖家秀</text>
			</view>
		</view>
		<view class="main page">
			<view class="grid">
				<view class="box" v-for="(item,index) in girls" :key="item._id">
					<view class="p g-img">
						<image :src="item.url" class="img" @click="onpreview(index)" mode="widthFix"></image>
					</view>
					<view class="p flex center">
						<uni-icons type="shop" size="24"></uni-icons>：<text style="font-size: 28rpx;"
							class="item">{{item.shop}}</text>
					</view>
					<view class="p two-line">
						评论：{{item.comment}}
					</view>
				</view>
			</view>
		</view>
		<view class="tools flex column" v-if="fixed">
			<view class="around" @click="refresh">
				<uni-icons type="refresh" size="30"></uni-icons>
			</view>
			<view class="around" @click="totop">
				<uni-icons type="arrow-up" size="30"></uni-icons>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'

	uni.showNavigationBarLoading()
	const girls = ref([])
	async function network() {
		let res = await uni.request({
			url: "https://tea.qingnian8.com/tools/taoShow",
			data: {
				size: 10
			},
			header: {
				'access-key': "blinglee"
			},
		}).then((res) => {
			if (res.data.errCode === 0) {
				girls.value = [...girls.value, ...res.data.data]
			} else if (res.data.errCode === 400) {
				uni.showToast({
					title: res.data.errMsg,
					icon: "none"
				})
			}

		}).catch((err) => {
			console.log(err);
		}).finally(() => {
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		})

	}

	network()

	//点击预览
	const onpreview = (index) => {
		let urls = girls.value.map(item => item.url)
		uni.previewImage({
			current: index,
			urls
		})
	}

	//触底加载更多
	onReachBottom(() => {
		network()
	})
	//下拉刷新
	onPullDownRefresh(() => {
		girls.value = []
		network()
	})

	//点击刷新
	const refresh = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
		girls.value = []
		network()
	}
	//返回顶部
	const fixed = ref(false)
	onPageScroll((e) => {
		fixed.value = e.scrollTop > 200;
	})

	const totop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
</script>

<style lang="scss" scoped>
	.girls {
		background-color: #6acaff;
		background: -webkit-linear-gradient(135deg, #9cecfb, #59E1D9, #7BAEFC, #56CCF2, #0ED2F7);
		background: -moz- oldlinear-gradient(135deg, #9cecfb, #59E1D9, #7BAEFC, #56CCF2, #0ED2F7);
		background: -o-linear-gradient(135deg, #9cecfb, #59E1D9, #7BAEFC, #56CCF2, #0ED2F7);
		background: linear-gradient(315deg, #9cecfb, #59E1D9, #7BAEFC, #56CCF2, #0ED2F7);
		-webkit-background-size: 400% 400%;
		-moz-background-size: 400%;
		-o-background-size: 400%;
		background-size: 400%;
		position: relative;
		height: max(58.66666667vw, 220px);

		.header {
			position: absolute;
			left: 0;
			top: 0;
			padding-top: 120rpx;
			right: 0;
			bottom: 0;
			background: -webkit-gradient(linear, left top, left bottom, from(rgba(243, 245, 247, 0)), color-stop(99%, #f3f5f7));
			background: -webkit-linear-gradient(top, rgba(243, 245, 247, 0) 0%, #f3f5f7 99%);
			background: -moz- oldlinear-gradient(top, rgba(243, 245, 247, 0) 0%, #f3f5f7 99%);
			background: -o-linear-gradient(top, rgba(243, 245, 247, 0) 0%, #f3f5f7 99%);
			background: linear-gradient(180deg, rgba(243, 245, 247, 0) 0%, #f3f5f7 99%);

			.h2 {
				margin-bottom: 0;
				color: #fff;
			}
		}

		.main {
			padding: 300rpx 24rpx 24rpx;
			background: none;
			position: relative;
			z-index: 2;

			.grid {
				gap: 24rpx;

				.box {
					background: -webkit-gradient(linear, left top, left bottom, from(#fffbf3), to(#fff));
					background: -webkit-linear-gradient(top, #fffbf3 0%, #fff 100%);
					background: -moz- oldlinear-gradient(top, #fffbf3 0%, #fff 100%);
					background: -o-linear-gradient(top, #fffbf3 0%, #fff 100%);
					background: linear-gradient(180deg, #fffbf3 0%, #fff 100%);

					.g-img {
						width: 100%;
						height: 240rpx;
						overflow: hidden;

						.img {
							object-fit: cover;
						}
					}

					.two-line {
						font-size: 28rpx;
						line-height: 1.2;
						color: #666;
					}
				}


			}
		}

		.tools {
			position: fixed;
			right: 36rpx;
			bottom: 120rpx;
			z-index: 999;

			.around {
				background: rgba(243, 245, 247, 0.85);
				border-radius: 50%;
				margin-bottom: 24rpx;
				padding: 12rpx;
			}
		}
	}
</style>